<html>
    <head>
        <title>Itowns - Globe</title>

        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                overflow:hidden;
                height:100%;
            }

            #viewerDiv {
                margin : auto auto;
                width: 100%;
                height: 100%;
                padding: 0;
            }

            #miniDiv {
                display: block;
                margin-bottom: 20px;
                margin-right: 20px;
                position: absolute;
                width:100px;
                height:100px;
                left: 20;
                bottom: 0;
                color: white;
            }

            #menuDiv {
                position: absolute;
                top:0px;
                margin-left: 0px;
            }
            .divScaleWidget {
                border: 2px solid black;
                border-top: none;
                text-align: center;
                display: block;
                background-image: linear-gradient(rgba(200, 200, 200, 0.3), rgba(200, 200, 200, 0.3));
                margin-bottom: 20px;
                margin-right: 20px;
                position: absolute;
                width:200px;
                height:18px;
                color: black;
                font-family: 'Open Sans',
                sans-serif;
                font-size: 16px;
                right: 0;
                bottom: 0;
            }


            @media (max-width: 600px) {
                #menuDiv {
                    display: none;
                }
            }
        </style>
        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="GUI/dat.gui/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv">
            <span class="divScaleWidget"> Scale </span>
        </div>
        <div id="miniDiv">
        </div>
        <script src="GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="../dist/debug.js"></script>
        <script type="text/javascript">
            var renderer;
            var exports = {};
        </script>
        <script src="globe.js"></script>
        <script type="text/javascript">
            /* global itowns, document, GuiTools, globeView, promises */
            var menuGlobe = new GuiTools('menuDiv');
            menuGlobe.view = globeView;
            var divScaleWidget = document.querySelectorAll('.divScaleWidget')[0];

            function updateScaleWidget() {
                var value = globeView.controls.pixelsToMeters(200);
                value = Math.floor(value);
                var digit = Math.pow(10, value.toString().length - 1);
                value = Math.round(value / digit) * digit;
                var pix = globeView.controls.metersToPixels(value);
                var unit = 'm';
                if (value >= 1000) {
                    value /= 1000;
                    unit = 'km';
                }
                divScaleWidget.innerHTML = `${value} ${unit}`;
                divScaleWidget.style.width = `${pix}px`;
            }

            // Listen for globe full initialisation event
            globeView.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                // eslint-disable-next-line no-console
                console.info('Globe initialized');
                Promise.all(promises).then(function () {
                    menuGlobe.addImageryLayersGUI(globeView.getLayers(function (l) { return l.type === 'color'; }));
                    menuGlobe.addElevationLayersGUI(globeView.getLayers(function (l) { return l.type === 'elevation'; }));
                });
                updateScaleWidget();
            });
            globeView.controls.addEventListener(itowns.CONTROL_EVENTS.RANGE_CHANGED, () => {
                updateScaleWidget();
            });
        </script>
    </body>
</html>
